<template>
  <!--  顶  -->
  <div id="main-top-panel" class="header show clearfix">
    <!--      :style="{background:'url('+topTitle+')',height:'70px'}">-->
    <div id="header_title" class="header-title">
      <div class="top-nav-left" style="">
        <div class="top-nav-item top-nav-item-left " :style="astyle1" data-name="safeDashboard" @click="topMenuClick(1)">
          <div class="top-nav-item-content-left">指挥调度</div>
        </div>
        <div class="top-nav-item top-nav-item-left " :style="astyle2" data-name="weizhi" @click="topMenuClick(2)">
          <div class="top-nav-item-content-left">多屏监控</div>
        </div>
        <div class="top-nav-item top-nav-item-left " :style="astyle3" data-name="multi_screen" @click="topMenuClick(3)">
          <div class="top-nav-item-content-left">可视化云屏</div>
        </div>
      </div>
      <div class="logo" style="">
        <!-- <img id="logoImg" alt="" src="../808gps/images/home/logo.png"> -->
        <span id="span-title" style="font-size: 20px;height: 41px;padding-top: 0px; padding-right: 9px;"><span id="main-title">国标28181管理调度平台</span>
          <span id="main-title-sub" style="display: block;font-size: 11px;"></span></span>
      </div>
      <div class="top-nav-right" style="">
        <div class="top-nav-item top-nav-item-right"  :style="astyle4" data-name="playback" @click="topMenuClick(4)">
          <div class="top-nav-item-content-right">历史回放</div></div>
        <div class="top-nav-item top-nav-item-right"  :style="astyle5" data-name="tongji" @click="topMenuClick(5)">
          <div class="top-nav-item-content-right">数据统计</div>
        </div>
        <div class="top-nav-item top-nav-item-right"  :style="astyle6" data-name="police" @click="topMenuClick(6)">
          <div class="top-nav-item-content-right">信息管理</div>
        </div>
      </div>
    </div>
    <div class="v9-logout-menu" :style="{top:'1px'}">
      <User :login-name="loginName"/>
<!--      <svg t="1627010298802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13612" width="30" height="30">
        <path d="M504.59685925 253.55757036m-207.0452148 0a207.04521482 207.04521482 0 1 0 414.09042963 0 207.04521482 207.04521482 0 1 0-414.09042963 0Z" p-id="13613" fill="#2752ee"></path>
        <path d="M856.54945185 647.38038517C656.42192592 519.8279111 658.4850963 519.8279111 514.42725925 519.8279111c-141.63057778 0-141.99466667 0-358.02074073 132.64971852-47.81700741 31.7970963-75.85185185 188.59804445-75.85185185 230.22554074 0 108.86257778 192.48165925 78.88592592 429.86761481 78.88592593s429.86761482 29.97665185 429.86761482-78.88592593c0.12136297-43.93339259-31.06891852-202.67614815-83.74044445-235.32278519z" p-id="13614" fill="#2752ee"></path>
      </svg>-->
    </div>
    <div class="header-nav-search" style="display: none;">
      <div>
        <i class="fas fa-search"></i>
        <input type="text" id="navSearchInput" class="header-nav-search-input" placeholder="请输入关键字" maxlength="20" autocomplete="off">
      </div>
    </div>
    <!-- <div id="zh-screen" class="zh-btn" style="display: none" onclick="toScreen()">
         <img src="images/cloud.png"/>
         <a class="zh-btn-title"></a>
     </div>-->
    <!-- 当 navLayout 等于 2 时·被删除 -->
    <div id="rightTabs" class="nav-bar clearfix" style="display: block;">
    </div>
    <!-- 顶部右侧图标 -->
    <div class="header-nav" style="">

<!--
      <div class="login-mess" style="">
        <div class="login-mess-account">
          <a class="down"><span class="account" title="maocheng">maoche...</span><em class="arrows"></em></a>
          <a class="email" style="display:none;"><i></i></a>

        </div>
        <div class="quick-menu">

          <p id="perfectInfo" style="display:none;"><a class="perfectInfo" title="信息完善">信息完善</a></p>
          <p id="expirationReminder" style="display:none;"><a class="expirationReminder" title="到期提醒">到期提醒</a></p>
          <p id="modifyPhoneNumber" style="display: none;"><a class="modifyPhoneNumber"></a></p>
        </div>
      </div>
-->

      <div id="notice_btn" class="zh-btn zh-btn-notice" style="display: none">
        <i class="fas fa-envelope"></i>
        <i class="unread-num" style="display: none"></i>
        <span></span>
      </div>
      <div class="header-nav-home zh-btn" onclick="toHome()" style="display: none">
        <i class="fas fa-th-large"></i>
      </div>
      <div class="header-nav-skin zh-btn" onclick="changeSkin()" style="display: none;">
        <i class="fas fa-tshirt"></i>
      </div>
      <div class="header-nav-search-btn zh-btn" onclick="showNavSearch()" style="display: none">
        <i class="fas fa-search"></i>
      </div>
    </div>

  </div>
</template>
<script>
//import User from '@_c/components/main/com'
import User from '@/components/main/components/user'
import {getLoginUser} from "@/libs/util";
export default {
  components:{User},
  props:{
    activePanel:{
      type: Number,
      default: 1
    }
  },
  watch:{
    activePanel(oldVal,newVal){
      //console.log("oldVal:%o,newVal:%o",oldVal,newVal)
      this.changeActive();
    }
  },
  data(){
    return{
      astyle1:{color: '#fff'},
      astyle2:{color: '#fff'},
      astyle3:{color: '#fff'},
      astyle4:{color: '#fff'},
      astyle5:{color: '#fff'},
      astyle6:{color: '#fff'},
    }
  },
  computed: {
    loginName(){
      /**
       *  computed 就不需要在 data 声明loginName了
       * 取 /store/moudle/login.js 里 getLoginName, 后不用带()*/
      //console.log("this.$store.getters.getLoginName: %o",this.$store.getters.getLoginName)
      const userInfo = getLoginUser();//this.$store.getters.getUserInfo;
      return (!!userInfo)?userInfo.loginName:"";//  this.$store.getters.getFullName;
      //return this.$store.getters.getLoginName;
    },
  },
  methods:{
    topMenuClick(index){
      if (index == 1){
        /** 指挥调度 */

        this.$router.push('/commandDispatch');
/*        this.astyle1={color: '#555'};
        this.astyle2={color: '#fff'};
        this.astyle3={color: '#fff'};
        this.changeActive(0);*/

      }else if (index == 2){
        this.$router.push('/multiScreenPlay');
        /** 多屏监控 */
/*        this.changeActive(1);
        this.astyle1={color: '#fff'};
        this.astyle2={color: '#555'};
        this.astyle3={color: '#fff'};*/


      }else if (index == 3){
/*        this.changeActive(2);
        this.astyle1={color: '#fff'};
        this.astyle2={color: '#fff'};
        this.astyle3={color: '#555'};*/

        /** 可视化云屏 */
      }else if (index == 4){
        this.changeActive(3);
        /** 历史回放 */
      }else if (index == 5){
        this.changeActive(4);
        /** 数据统计 */
      }else if (index == 6){
        this.changeActive(5);
        /** 数据管理 */
        console.log(this.$router);
        this.$router.push('/data_main');
      }
    },
    changeActive(){
      this.astyle1={color: '#fff'};
      this.astyle2={color: '#fff'};
      this.astyle3={color: '#fff'};
      this.astyle4={color: '#fff'};
      this.astyle5={color: '#fff'};
      this.astyle6={color: '#fff'};
      if (this.activePanel == 1){
        this.astyle1={color: '#555'}
      }else if (this.activePanel == 2){
        this.astyle2={color: '#555'}
      }else if (this.activePanel == 3){
        this.astyle3={color: '#555'}
      }else if (this.activePanel == 4){
        this.astyle4={color: '#555'}
      }else if (this.activePanel == 5){
        this.astyle5={color: '#555'}
      }else if (this.activePanel == 6){
        this.astyle6={color: '#555'}
      }
    },

    multScreentPlay(){

    },
    realTimeMonitor(){

    }
  },
  mounted() {
/*    console.log("DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD11DDDDD");
    console.log("activePanel: %o",this.activePanel);*/
    this.changeActive();
  }
}
</script>
<style lang="less" scoped>
@import "../../template";
#main-top-panel.header {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent !important;
  overflow: hidden;
  width: 100%;
  background: url("../../../assets/images/top_logo.png") no-repeat;
  background-size: 100% 70px;
  z-index: 10;
}
.clearfix {
  *zoom: 1;
}
.show {
  display: block;
}
.clearfix:before, .clearfix:after {
  display: table;
  content: "";
  height: 0;
  clear: both;
  visibility: hidden;
}

.header .header-title {
  float: left;
  overflow: visible !important;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  padding: 0 !important;
  margin: 0 !important;
}
.top-nav-left {
  padding: 0 10% 0 80px;
}
.top-nav-right {
  padding: 0 80px 0 10%;
}
.top-nav-left, .top-nav-right {
  display: flex;
  flex: 2;
  justify-content: space-around;
}
.top-nav-item {
  position: relative;
  margin: 22px 10px 15px 10px;
  height: 40px;
  line-height: 40px;
  /* height: 20px; */
  /* line-height: 20px; */
  min-width: 80px;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #10225e;
  -webkit-box-shadow: 5px 5px 20px #2752ee inset;
  box-shadow: 5px 5px 20px #2752ee inset;
  border: 1px solid #2752ee;
  border-radius: 2px;
  cursor: pointer;
  z-index: 10;
  flex: 1;
  color: #fff;
  font-size: 14px;
  /* border: 30px solid #10225e; */
  /* border-right: 5px solid #10225e; */
  /* border-left: 5px solid #10225e; */
  /* border-bottom: 24px solid #10225e; */
}
.top-nav-item-left {
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}
.top-nav-item-content-left {
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}
.top-nav-item-right {
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}
.top-nav-item-content-right {
  -webkit-transform: skew(45deg);
  transform: skew(45deg);
}

.top-nav-item.active {
  color: var(--themeHoverColor);
}
.header .header-title .logo {
  height: 63px !important;
  min-width: 305px;
  max-width: 450px;
  position: relative;
  top: 4px;
  left: 0;
  z-index: 10;
  background: linear-gradient(to right, #091754, #122e87, #091754);
  flex: 1;
}
#span-title {
  width: 100%;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #c1e0ff;
  font-weight: bold;
  background: linear-gradient(to right, #091754, #122e87, #091754);
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
}
#main-title {
  display: flex;
  align-items: center;
  height: 100% !important;
  font-size: 24px;
  text-indent: 70px;
}
#main-title-sub {
  display: none !important;
}
.v9-logout-menu {
  position: absolute;
  right: 15px;
  top: 30px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
</style>
